<template>
    <section>
        <div class="qx_left">
            <h4>● 权限分组</h4>
            <section class="gdt">
                <a-checkbox-group @change="onChangedel">
                    <div v-for="item in authGroups" :key="item.roleCode">
                        <div
                            class="list"
                            :class="
                                curSelectAuthGroup == item.roleCode
                                    ? 'actived'
                                    : ''
                            "
                            v-if="selectflag"
                            @click="lookItemGroupAuth(item)"
                        >
                            <span>{{ item.roleName }}</span>
                        </div>
                        <div
                            class="list"
                            :class="
                                curSelectAuthGroup == item.roleCode
                                    ? 'actived'
                                    : ''
                            "
                            v-if="!selectflag"
                        >
                            <a-checkbox :value="item.roleCode">
                                {{ item.roleName }}
                            </a-checkbox>
                        </div>
                    </div>
                    <div v-if="!selectflag">
                        <a-button
                            class="fr mr20"
                            type="danger"
                            @click="delselect"
                            >删除分组</a-button
                        >
                    </div>
                </a-checkbox-group>
            </section>
        </div>
        <div class="qx_right">
            <div class="roles-list-show">
                <div
                    class="roles-lb"
                    v-for="(item, index) in authListGroupItemselect"
                    :key="index"
                >
                    <img src="../../../image/a12.jpg" width="100%" />
                    <p>{{ item.operateName }}</p>
                    <span class="yd-wz"></span>
                </div>
                <section>
                    <a-button
                        class="editbtn"
                        type="danger"
                        @click="editAuthGroup"
                        >编辑分组</a-button
                    >
                </section>
            </div>
        </div>
    </section>
</template>

<script>
//管理员设置

import { message } from "ant-design-vue";
export default {
    data() {
        return {
            //权限设置
            qxvisible: false,
            editflag: false,
            authGroupInfo: {
                roleCode: "",
                roleName: "",
                operCodeList: [],
            },
            allAuthList: [],
            authGroups: [],
            authListGroupItem: [],
            authListGroupItemselect: [],
            selectflag: true,
            delcheckbox: [],
            editcode: "",
            //审核信息
            auditList: [],

            qxrules: {
                roleName: {
                    required: true,
                    message: "分组名称不能为空",
                },
                roleCode: {
                    required: true,
                    message: "分组编码不能为空",
                },
                operCodeList: {
                    required: true,
                    message: "分组权限不能为空",
                },
            },
        };
    },

    mounted() {
        //权限设置
        this.queryAuditList();
        this.queryAllOperatorInfos();
        this.queryOwerOperatorGrop();
    },
    methods: {
        deletefenzufu() {
            this.selectflag = !this.selectflag;
        },
        queryAuditList(num) {
            let params = {
                status: num || "",
                type: 1,
            };
            this.$post("/exter/manage/queryAuditList", params).then(
                (result) => {
                    console.log(result);
                    this.auditList = result.buss || [];
                }
            );
        },

        //权限设置
        // 点击编辑权限组
        editAuthGroup() {
            this.$emit("editAuthGroup", this.editcode);
        },
        onChangedel(val) {
            console.log(val);
            this.delcheckbox = val;
        },
        delselect() {
            if (this.delcheckbox.length == 0) {
                message.error("至少选择一个组进行删除");
                return;
            }
            this.$post("/exter/manage/delOperatorGrop", {
                paramVar: this.delcheckbox,
            }).then((result) => {
                console.log(result);
                this.selectflag = true;
                this.queryOwerOperatorGrop();
            });
        },
        // 判断是否有当前权限
        queryOwerOperatorGrop() {
            this.$post("/exter/manage/queryOwerOperatorGrop", {}).then(
                (result) => {
                    this.authGroups = result.buss || [];
                    if (this.authGroups.length > 0) {
                        this.lookItemGroupAuth(this.authGroups[0]);
                        this.editcode = this.authGroups[0].roleCode;
                    }
                }
            );
        },
        lookItemGroupAuth(item) {
            this.curSelectAuthGroup = item.roleCode;
            this.catOperatorGrop({
                paramVar: item.roleCode,
            });
            this.editcode = item.roleCode;
            console.log(this.editcode);
            this.$emit("lookItemGroupAuth", item);
        },
        catOperatorGrop(obj) {
            this.$post("/exter/manage/catOperatorGrop", obj).then((result) => {
                console.log(result);
                this.authListGroupItemselect = result.buss.operCodeList;
            });
        },
        onChange(val) {
            console.log(val);
            this.authGroupInfo.operCodeList = val;
        },
        // 查询全部权限
        queryAllOperatorInfos() {
            this.$post("/exter/manage/queryAllOperatorInfos", {}).then(
                (result) => {
                    console.log(result);
                    this.allAuthList = result.buss || [];
                }
            );
        },

        addqx() {
            this.authGroupInfo.addFlag = this.editflag ? 0 : 1;
            this.$refs["qxruleForm"].validate((valid) => {
                if (valid) {
                    this.$post(
                        "/exter/manage/setOperatorGrop",
                        this.authGroupInfo
                    ).then(() => {
                        this.queryOwerOperatorGrop();
                        this.qxvisible = false;
                    });
                }
            });
        },

        handleOk() {
            console.log(this.authGroupInfo);
        },
        cancelform() {
            this.qxvisible = false;
            this.authGroupInfo.roleCode = "";
            this.authGroupInfo.roleName = "";
            this.authGroupInfo.operCodeList = [];
        },
    },
};
</script>

<style scoped lang='less'>
.index-info {
    color: white;
    display: flex;
    justify-content: space-between;
    width: 100%;
    padding: 40px;
    margin: 0 auto;
    background: #0a2d67;
    > div {
        width: 100%;
    }

    .qx_left {
        float: left;
        width: 15%;
        min-width: 240px;
        height: 80vh;
        overflow: auto;
        background: #1d4292;
        font-size: 14px;
        .ant-checkbox-group {
            width: 100%;
            color: #fff;

            > div:hover {
                cursor: pointer;
                background-color: #2ce0ef;
            }
            .ant-checkbox-wrapper {
                color: #fff;
                width: 80%;
            }
        }

        h4 {
            margin-top: 10px;
            background: #0c356d;
            height: 35px;
            line-height: 35px;
            padding-left: 10px;
            color: #fff;
        }
        .actived {
            background: #2ce0ef;
        }
        .list {
            margin: 6px 0;
            padding: 4px 0;
            padding-left: 20px;
        }
    }
    .qx_right {
        float: right;
        width: calc(100% - 20%);
        height: 80vh;
        overflow: auto;
        background: #1d4292;
        .roles-list-show {
            display: block;
            display: flex;
            flex-wrap: wrap;
            margin-left: 40px;
            .editbtn {
                position: absolute;
                right: 30px;
                top: 66px;
            }
            .roles-lb {
                float: left;
                width: 330px;
                padding: 30px 0;
                margin-top: 50px;
                background: white;
                border-radius: 20px;
                /* float: left; */
                position: relative;
                margin-right: 40px;
                margin-bottom: 40px;

                .yd-wz {
                    height: 20px;
                    width: 20px;
                    background: #dbdbdb;
                    border-radius: 100px;
                    position: absolute;
                    top: 20px;
                    left: 20px;
                }
                p {
                    color: #000000;
                    text-align: center;
                    font-weight: normal;
                    font-size: 26px;
                }
                img {
                    width: 60%;
                    display: block;
                    margin: 0 auto;
                    margin-bottom: 20px;
                }
            }
        }
    }
}
</style>
